/* stylelint-disable length-zero-no-unit */
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
/* stylelint-disable order/properties-order */
$ai-assistant-button: (
  // Color
  'color-bg': getCssVar('color', 'bg', 1),
  'color-text': getCssVar(color, text, 0),
  'color-box-shadow': getCssVar(shadow, elevated),
  // Width/Height
  'width': 56px,
  'height': 56px,
  // Font
  'font-text-font-size': 52px,
  // Spacing
  'spacing-padding': 8px,
  // Other
  'position': fixed,
  'position-left': revert,
  'position-right': revert,
  'position-top': revert,
  'position-bottom': revert,
  'position-base-offset': 0px,
  'position-top-offset': 20px,
  'position-bottom-offset': 100px,
  'position-drag-left': revert,
  'position-drag-top': revert,
  'position-start-top': calc(#{getCssVar(ai-assistant-button, position-top-offset)} + 60px),
  'position-end-bottom': calc(#{getCssVar(ai-assistant-button, position-bottom-offset)}),
  'transform': revert,
  'transform-left': translateX(-35%),
  'transform-right': translateX(35%),
  'transform-hover': revert,
  'transform-hover-base': translate3d(0, 0, 0),
  'transform-hover-center': translate3d(0, 0, 0),
  'border': none,
  'z-index': 9999,
  'opacity': 0.7,
  'opacity-hover': 1,
);

@include b(ai-assistant-button) {
  @include set-component-css-var('ai-assistant-button', $ai-assistant-button);

  position: getCssVar(ai-assistant-button, position);
  left: getCssVar(ai-assistant-button, position-left);
  right: getCssVar(ai-assistant-button, position-right);
  top: getCssVar(ai-assistant-button, position-top);
  bottom: getCssVar(ai-assistant-button, position-bottom);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: getCssVar(ai-assistant-button, spacing-padding);
  width: getCssVar(ai-assistant-button, width);
  height: getCssVar(ai-assistant-button, height);
  background-color: getCssVar(ai-assistant-button, color-bg);
  border-radius: 50%;
  box-shadow: getCssVar(ai-assistant-button, color-box-shadow);
  color: getCssVar(ai-assistant-button, color-text);
  font-size: getCssVar(ai-assistant-button, font-text-font-size);
  z-index: getCssVar(ai-assistant-button, z-index);
  transform: getCssVar(ai-assistant-button, transform);
  opacity: getCssVar(ai-assistant-button, opacity);

  &:hover {
    transform: getCssVar(ai-assistant-button, transform-hover);
    transition: -webkit-transform ease-out 250ms;
    transition: transform ease-out 250ms;
    transition: transform ease-out 250ms, -webkit-transform ease-out 250ms;
    opacity: getCssVar(ai-assistant-button, opacity-hover);
    cursor: pointer;
  }

  @include e('content') {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .#{bem(icon)} {
      display: flex;
      align-items: center;
    }

    svg {
      width: 1em;
      height: 1em;
      max-width: 100%;
      max-height: 100%;

      path {
        fill: currentcolor;
      }
    }
  }

  @include when(leftstart) {
    #{getCssVarName(ai-assistant-button, position-left)}: getCssVar(ai-assistant-button, position-base-offset);
    #{getCssVarName(ai-assistant-button, position-top)}: getCssVar(ai-assistant-button, position-start-top);
    #{getCssVarName(ai-assistant-button, transform)}: getCssVar(ai-assistant-button, transform-left);
    #{getCssVarName(ai-assistant-button, transform-hover)}: getCssVar(ai-assistant-button, transform-hover-base);
  }

  @include when(left) {
    #{getCssVarName(ai-assistant-button, position-left)}: getCssVar(ai-assistant-button, position-base-offset);
    #{getCssVarName(ai-assistant-button, position-top)}: 50%;
    #{getCssVarName(ai-assistant-button, transform)}: translateY(-50%) getCssVar(ai-assistant-button, transform-left);
    #{getCssVarName(ai-assistant-button, transform-hover)}: translateY(-50%) translateX(0);
  }

  @include when(leftend) {
    #{getCssVarName(ai-assistant-button, position-left)}: getCssVar(ai-assistant-button, position-base-offset);
    #{getCssVarName(ai-assistant-button, position-bottom)}: getCssVar(ai-assistant-button, position-end-bottom);
    #{getCssVarName(ai-assistant-button, transform)}: getCssVar(ai-assistant-button, transform-left);
    #{getCssVarName(ai-assistant-button, transform-hover)}: getCssVar(ai-assistant-button, transform-hover-base);
  }

  @include when(rightstart) {
    #{getCssVarName(ai-assistant-button, position-right)}: getCssVar(ai-assistant-button, position-base-offset);
    #{getCssVarName(ai-assistant-button, position-top)}: getCssVar(ai-assistant-button, position-start-top);
    #{getCssVarName(ai-assistant-button, transform)}: getCssVar(ai-assistant-button, transform-right);
    #{getCssVarName(ai-assistant-button, transform-hover)}: getCssVar(ai-assistant-button, transform-hover-base);
  }

  @include when(right) {
    #{getCssVarName(ai-assistant-button, position-right)}: getCssVar(ai-assistant-button, position-base-offset);
    #{getCssVarName(ai-assistant-button, position-top)}: 50%;
    #{getCssVarName(ai-assistant-button, transform)}: translateY(-50%) getCssVar(ai-assistant-button, transform-right);
    #{getCssVarName(ai-assistant-button, transform-hover)}: translateY(-50%) translateX(0);
  }

  @include when(rightend) {
    #{getCssVarName(ai-assistant-button, position-right)}: getCssVar(ai-assistant-button, position-base-offset);
    #{getCssVarName(ai-assistant-button, position-bottom)}: getCssVar(ai-assistant-button, position-end-bottom);
    #{getCssVarName(ai-assistant-button, transform)}: getCssVar(ai-assistant-button, transform-right);
    #{getCssVarName(ai-assistant-button, transform-hover)}: getCssVar(ai-assistant-button, transform-hover-base);
  }

  &.#{bem(ai-assistant-button)} { 
    // 拖拽
    @include when(drag) {
      #{getCssVarName(ai-assistant-button, position-left)}: getCssVar(ai-assistant-button, position-drag-left);
      #{getCssVarName(ai-assistant-button, position-top)}: getCssVar(ai-assistant-button, position-drag-top);
      #{getCssVarName(ai-assistant-button, position-right)}: revert;
      #{getCssVarName(ai-assistant-button, position-bottom)}: revert;
      #{getCssVarName(ai-assistant-button, transform)}: revert;
      #{getCssVarName(ai-assistant-button, transform-hover)}: revert;
      #{getCssVarName(ai-assistant-button, opacity)}: 1;

      // 吸附
      @include when(adsorption-left) {
        #{getCssVarName(ai-assistant-button, position-left)}: getCssVar(ai-assistant-button, position-base-offset);
        #{getCssVarName(ai-assistant-button, transform)}: getCssVar(ai-assistant-button, transform-left);
        #{getCssVarName(ai-assistant-button, transform-hover)}: getCssVar(ai-assistant-button, transform-hover-base);
        #{getCssVarName(ai-assistant-button, opacity)}: 0.7;
      }

      @include when(adsorption-right) {
        #{getCssVarName(ai-assistant-button, position-left)}: revert;
        #{getCssVarName(ai-assistant-button, position-right)}: getCssVar(ai-assistant-button, position-base-offset);
        #{getCssVarName(ai-assistant-button, transform)}: getCssVar(ai-assistant-button, transform-right);
        #{getCssVarName(ai-assistant-button, transform-hover)}: getCssVar(ai-assistant-button, transform-hover-base);
        #{getCssVarName(ai-assistant-button, opacity)}: 0.7;
      }
    }
  }
}